<template>
  <a-input v-bind="$attrs" :size="size" :value="state">
    <template #prefix>
      <Icon :icon="prefixIcon" v-if="prefixIcon"/>
    </template>
    <template #suffix>
      <Icon :icon="suffixIcon" v-if="suffixIcon" />
    </template>
  </a-input>
</template>
<script lang="ts" setup>
  import { useRuleFormItem } from '@/hooks/component/useFormItem';
  import { Icon } from '@/components/Icon';

  defineOptions({ name: 'InputIcon', inheritAttrs: false });

  const props = defineProps({
    value: { type: String },
    size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
    suffixIcon: { type: String },
    prefixIcon: { type: String },
  });

  const [state] = useRuleFormItem(props);
</script>
